<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>作业提交情况</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../resources/layuiadmin/layui/css/layui.css">
  <link rel="stylesheet" href="../../../resources/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
  <div class="layui-container">
    <a class="fly-logo">
      <img src="../../../resources/img/logo.png" alt="layui">
    </a>
    <ul class="layui-nav fly-nav layui-hide-xs">
      <li class="layui-nav-item layui-this">
        <a class="student-index"><i class="iconfont icon-jiaoliu"></i>超行作业通-学生界面</a>
      </li>
    </ul>
    <ul class="layui-nav fly-nav-user">
      <li class="layui-nav-item">
        <a class="fly-nav-avatar" href="javascript:;">
          <cite class="layui-hide-xs" id="cite-name"></cite>
          <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：学生"></i>
          <img src="" alt="" id="profileImg">
        </a>
        <dl class="layui-nav-child">
          <dd><a href="/student/set"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
          <dd><a class="student-index"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
          <hr style="margin: 5px 0;">
          <dd><a href="/home/logout" style="text-align: center;">退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

<div class="layui-hide-xs">
  <div class="fly-panel fly-column">
    <div class="layui-container">
      <ul class="layui-clear">
        <li><a class="student-index">首页</a></li>
        <li><a href="/student/course">选课列表</a></li>
        <li class="layui-this"><a href="">作业提交情况</a></li>
        <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
      </ul>

      <div class="fly-column-right layui-hide-xs">
        <a id="submit-homework" class="layui-btn">提交作业</a>
      </div>
    </div>
  </div>
</div>

<div class="layui-container fly-marginTop">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-md12">
      <div class="fly-panel detail-box">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>我的作业提交情况统计</legend>
        </fieldset>
        <div class="layui-collapse" lay-accordion id="course-list">
        </div>
      </div>
    </div>

  </div>
</div>

<div class="fly-footer">
  <p>超行作业通 2021 &copy; <a target="_blank">By 软件工程小组</a></p>
</div>

<script src="../../../resources/layuiadmin/layui/layui.js"></script>
<script src="../../../resources/js/common.js"></script>
<script>
  layui.use(['element'], function(){
    var $ = layui.jquery;
    var studentId = getQueryString('studentId');

    //访问后台，获取学生信息
    $.getJSON('/student/getStudentInfo', function(data) {
      if (data.success) {
        //获取后台传递过来的教师信息
        var student = data.student;

        //判断从后台传入的图片流是否为空，
        //如果为空，给img标签添加noImage的图片路径
        //如果不为空，给img标签添加后台传入的图片路径
        if (student.profileImg != null){
          $('#profileImg').attr('src', student.profileImg);
        }else {
          $('#profileImg').attr('src', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597852452753&di=a753cb97410d9e6d3e312f303c326fdb&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F01%2F38%2F98%2F25573ca2525d341.jpg');
        }

        //根据name、Id或Class名称为相应标签里的内容添加值
        //html-替换标签里的内容
        //append-在标签原有内容的末尾添加新的内容
        //attr-给标签添加新的属性值
        $('#submit-homework').attr('href','/student/submit?studentId='+student.studentId);
        $('#cite-name').html(student.studentName);
        $('.student-index').attr('href', '/student/index?studentId=' + student.studentId);
      }
    });

    //访问后台，获取课程列表
    $.getJSON('/student/listCourseMap', function(data) {
      if (data.success) {
        // 若访问成功，则依据后台传递过来的课程信息动态拼接html
        data.studentCourseList.map(function (item) {
          var tempHtml = '';
          tempHtml += ''
                  + '<div class="layui-colla-item">'
                  + '<h2 class="layui-colla-title">'
                  + item.course.courseName
                  + '</h2>'
                  + '<div class="layui-colla-content">'
                  + '<div class="layui-tab layui-tab-card">'
                  + '<ul class="layui-tab-title" id="'
                  + item.course.courseId + '-1'+'">'
                  + '</ul>'
                  + '<div class="layui-tab-content" id="'
                  + item.course.courseId + '-2' +'">'
                  + '</div>'
                  + '</div>'
                  + '</div>'
                  + '</div>';

          $('#course-list').append(tempHtml);
          getHomeworkList(item.course.courseId);
        });

        layui.element.render();
      }
    });

    //根据传入的课程ID获取作业列表
    function getHomeworkList(courseId){
      $.get('/student/listHomeworkMapByCourseId?courseId=' + courseId, function(data) {
        if (data.success){
          // 若访问成功，则依据后台传递过来的信息动态拼接html
          data.homeworkList.map(function (item) {
            var tempHtml1 = '';
            var tempHtml2 = '';

            tempHtml1 += ''
                    + '<li>'
                    + item.homeworkName
                    + '</li>';
            tempHtml2 += ''
                    + '<div class="layui-tab-item">'
                    + '<fieldset class="layui-elem-field">'
                    + '<legend>'
                    + '作业内容'
                    + '</legend>'
                    + '<div class="layui-field-box">'
                    + item.homeworkDesc
                    + '</div>'
                    + '</fieldset>'
                    + '<hr class="layui-bg-green">'
                    + '<fieldset class="layui-elem-field">'
                    + '<legend>'
                    + '作业文件'
                    + '</legend>'
                    + '<div class="layui-field-box">'
                    + '<button type="button" class="layui-btn layui-btn-normal" onclick="downloadHomework('
                    + item.homeworkId + ')">'
                    + '<i class="layui-icon">&#xe601;</i> 下载'
                    + '</button>'
                    + '</div>'
                    + '</fieldset>'
                    + '<hr class="layui-bg-blue">'
                    + '<fieldset class="layui-elem-field">'
                    + '<legend>'
                    + '提交截至时间'
                    + '</legend>'
                    + '<div class="layui-field-box">'
                    + item.submitTime
                    + '</div>'
                    + '</fieldset>'
                    + '<hr class="layui-bg-red">'
                    + '<fieldset class="layui-elem-field">'
                    + '<legend>'
                    + '作业提交状态'
                    + '</legend>'
                    + '<div class="layui-field-box" id="ifSubmit-'
                    + item.homeworkId
                    + '">'
                    + '</div>'
                    + '</fieldset>'
                    + '<hr class="layui-bg-cyan">'
                    + '<fieldset class="layui-elem-field layui-field-title">'
                    + '<legend>'
                    + '操作'
                    + '</legend>'
                    + '<div class="layui-field-box" id="operation-'
                    + item.homeworkId
                    + '">'
                    + '</div>'
                    + '</fieldset>'
                    + '</div>';
            $('#'+ courseId + '-1').append(tempHtml1);
            $('#'+ courseId + '-2').append(tempHtml2);

            ifSubmit(item.homeworkId,studentId);
          });
        }
      });
    }

    //通过作业ID和学生ID判断学生是否提交了作业
    function ifSubmit(homeworkId,studentId){
      $.get('/student/getStudentHomeworkByCondition?homeworkId='+homeworkId+'&studentId='+studentId, function(data) {
        if (data.success){
          var tempHtml1 = '';
          var tempHtml2 = '';
          var studentHomework = data.studentHomework;
          tempHtml1 = '<button type="button" class="layui-btn layui-btn-radius">'
                  + '已提交'
                  + '</button>';
          tempHtml2 = '<button type="button" class="layui-btn layui-btn-normal">'
                  + '<a class="layui-bg-blue" href="'
                  + '/student/studentHomeworkInfo?studentHomeworkId='
                  + studentHomework.studentHomeworkId
                  + '">'
                  + '<i class="layui-icon">&#xe60a;</i> 查看详情'
                  + '</a>'
                  + '</button>';

          $('#ifSubmit-' + homeworkId).append(tempHtml1);
          $('#operation-' + homeworkId).append(tempHtml2);
        }else {
          var tempHtml3 = '';
          var tempHtml4 = '';
          tempHtml3 = '<button type="button" class="layui-btn layui-btn-radius layui-btn-warm">'
                  + '未提交'
                  + '</button>';
          tempHtml4 = '<a href="/student/submit?studentId='
                  + studentId +'">'
                  + '<button type="button" class="layui-btn">'
                  + '<i class="layui-icon">&#xe608;</i> 提交作业'
                  + '</button>'
                  + '</a>';

          $('#ifSubmit-' + homeworkId).append(tempHtml3);
          $('#operation-' + homeworkId).append(tempHtml4);
        }
      });
    }

  });
</script>

</body>
</html>